// Vars
// colors
$white: #ffffff !default;
$black: #000000  !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #666666 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;


$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #d82d11 !default;
$orange: #FF5300 !default;
$yellow: #e69730 !default;
$gold: #ff992c !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$lightCyan:#66ccff !default;

$primary: $blue !default;
$secondary: $gray-600 !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-200 !default;
$dark: $gray-800 !default;
$notice: $lightCyan !default;
$flag: $indigo !default;
$safe: $cyan !default;
// Support
$spacer: 10px !default;
$spacers: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$spacers: map-merge(
                        (
                                0: 0,
                                1: ($spacer * .25),
                                2: ($spacer * .5),
                                3: $spacer,
                                4: ($spacer * 1.5),
                                5: ($spacer * 3)
                        ),
                        $spacers
        );
//layout
.w-100{
    width: 100%;
}
.h-100{
    height:100%;
}
.vw-100{
    width:100vw;
}
.vh-100{
    height: 100vh;
}
.flex-column{
    flex-direction: column;
}
.flex-column-reverse{
    flex-direction: column-reverse;
}
.justify-content-around{
    justify-content: space-around !important;
}
.justify-content-between{
    justify-content: space-between !important;
}

.justify-content-center{
    justify-content: center;
}
.align-content-end{
    align-content: flex-end;
}
.align-items-center{
    align-items: center !important;
}
.align-items-end{
    align-items: flex-end !important;
}

.align-self-end {
    align-self: flex-end !important;
}
.d-inline-block{
    display:inline-block;
}
.position-fixed{
    position: fixed;
}
.fixed-bottom{
    bottom:0;
}
//text color
.text-white{
    color:$white;
}
.text-primary{
    color:$primary;
}
.text-light{
    color:$light;
}
.text-secondary{
    color:$gray-600;
}
.text-danger{
    color:$red;
}
.text-warning{
    color:$yellow;
}
//text weight
.font-w500{
    font-weight:500;
}
.font-w600{
    font-weight:600;
}
.font-w700{
    font-weight:700;
}
.font-bold{
    font-weight:bold;
}
//text align
.text-left{
    text-align: left;
}
.text-center{
    text-align: center;
}
.text-right{
    text-align: right;
}
//background
.bg-transparent{
    background:transparent;
}
.bg-white{
    background: #ffffff;
}
.bg-orange{
    background: $orange;
}
//border-radius
.radius-default{
    border-radius: 8px;
}
.radius-sm{
    border-radius: 4px;
}
.rounded-pill{
    border-radius:50rem;
}
.rounded-circle{
    border-radius:50%;
}
.btn{
    display: inline-block;
    font-weight: 400;
    color: #1a1a1a;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    user-select: none;
    background-color: initial;
    border: 1px solid transparent;
    padding: 1vw 2vw;
    font-size: inherit;
    line-height: 1;
    border-radius: 4px;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
